<!--
 * @Author: MrDotYan 2564217790@qq.com
 * @Date: 2024-09-26 18:07:50
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-27 09:54:04
 * @FilePath: /midway-admin/webServerAdmin/src/views/user/personal/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-box">
    <el-row :gutter="12">
      <el-col :span="18">
        <el-card>
          <Title type="line" title="我的信息">
            <template #extra>
              <div>
                <el-button type="primary" v-if="!isEdit" link @click="edit">编辑</el-button>
                <el-button v-if="isEdit" link @click="isEdit = false">取消</el-button>
                <el-button type="primary" v-if="isEdit" link @click="submit">提交</el-button>
              </div>
            </template>
          </Title>
          <el-divider></el-divider>
          <el-form label-position="top">
            <EDesc :col="2" :columns :data-source="modelValue"></EDesc>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Title type="line" title="我的消息"></Title>
          <el-divider></el-divider>
        </el-card>
      </el-col>
    </el-row>

    <PasswordDialog ref="passwordRef"></PasswordDialog>
  </div>
</template>

<script lang="tsx" setup>
import Upload from "@/components/Upload/Img.vue";
import { useUserStore } from "@/stores/modules/user";
import { reactive, ref } from "vue";
import EDesc from "@/components/EDesc/index.vue";
import Title from "@/components/Title/index.vue";
import { editUser } from "@/api/modules/user";
import { ResultEnum } from "@/enums/httpEnum";
import { ElMessage } from "element-plus";
import PasswordDialog from "./PasswordDialog.vue";

const userStore = useUserStore();

const columns = [
  {
    label: "头像",
    prop: "avatar",
    span: 24,
    render() {
      return <Upload borderRadius="50%" disabled={!isEdit.value} v-model:imageUrl={modelValue.avatar}></Upload>;
    }
  },
  {
    label: "姓名",
    prop: "userName",
    render({ value }) {
      return <div>{isEdit.value ? <el-input v-model={modelValue.userName}></el-input> : <span>{value}</span>}</div>;
    }
  },
  {
    label: "手机号",
    prop: "mobile",
    render({ value }) {
      return (
        <div>
          <span>{value}</span>
        </div>
      );
    }
  },
  {
    label: "邮箱",
    prop: "email",
    render({ value }) {
      return <div>{isEdit.value ? <el-input v-model={modelValue.email}></el-input> : <span>{value}</span>}</div>;
    }
  },
  {
    label: "身份证号",
    prop: "idCardNo",
    span: 24,
    render({ value }) {
      return <div>{isEdit.value ? <el-input v-model={modelValue.idCardNo}></el-input> : <span>{value}</span>}</div>;
    }
  },
  {
    label: "角色",
    prop: "role",
    render({ value }) {
      return value.map(role => (
        <el-tag>
          <div>{role.roleName}</div>
        </el-tag>
      ));
    }
  },
  {
    label: "部门",
    prop: "role",
    render() {
      return <el-tag>{modelValue.dept?.deptName}</el-tag>;
    }
  },
  {
    label: "密码",
    prop: "password",
    render() {
      return (
        <el-button type="primary" link onClick={() => changePassword()}>
          修改密码
        </el-button>
      );
    }
  }
];

const passwordRef = ref();
function changePassword() {
  passwordRef.value?.openDialog();
}
const modelValue = reactive(Object.assign(userStore.userInfo, { avatar: userStore.userInfo?.avatar }));

const isEdit = ref(false);
function edit() {
  isEdit.value = true;
}

function submit() {
  editUser({ id: modelValue.id }, modelValue).then(r => {
    const { code, message } = r;
    if (code === ResultEnum.SUCCESS) {
      ElMessage.success("保存成功！");
      isEdit.value = false;
    } else {
      ElMessage.error(message);
    }
  });
}
</script>

<style lang="scss" scoped>
.table-box {
  height: 100%;
  &:deep(.el-row) {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }
  &:deep(.el-card) {
    height: 100%;
  }
}
</style>
